<template>
	<view class="mix-page-header" >
		<view class="content row" 
			:style="{
				paddingRight: headerPaddingRight + 'px',
				paddingTop: statusBarHeight + 'px',
				height: navigationBarHeight + statusBarHeight + 'px'
			}"
		>
			<view class="btn center">
				<image class="message" src="/static/img/ic_index_vchat.png" mode="aspectFill"></image>
			</view>
			<view class="search-wrap center"
				:style="{height: customHeight + 'px'}" 
				@click="jumpSearchPage"
			>
				<text>{{searchText}}</text>
			</view>

		</view>
		<!-- 占位栏 -->
		<view v-if="showFillView" :style="[{minHeight: navigationBarHeight+statusBarHeight+'px'}]"></view>
	</view>
</template>

<script>
	// import IMController from '@/controller/im.js'
	export default {
		name: 'HomePageHeader',
		props: {
			//顶部是否占位
			showFillView: {
				type: Boolean,
				default: true
			},
			searchText: {
				type: String,
				default: '搜索相关剧本'
			},
			searchType: {
				type: String,
				default: 'scen'
			},
		},
		mounted() {
			// this.loginIM()
		},
		computed: {
			statusBarHeight(){
				return this.systemInfo.statusBarHeight
			},
			navigationBarHeight(){
				return this.systemInfo.navigationBarHeight;
			},
			customWidth(){
				return this.systemInfo.custom.width;
			},
			customHeight(){
				return this.systemInfo.custom.height;
			},
			//小程序右侧需要留出气泡空间
			headerPaddingRight(){
				// #ifndef MP
				return 0;
				// #endif
				// #ifdef MP-WEIXIN
				return this.customWidth + 20;
				// #endif
			},
		},
		methods: {
			//登录IM
			loginIM() {
				let loginIM = uni.getStorageSync("loginIM") || {};
				if(!loginIM.netaccount) return
				new IMController({
					token: loginIM.nettoken,
					account: loginIM.netaccount
				})
			},
			jumpSearchPage(){
				this.$jumpPages('search', {
					type: this.searchType,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 95;
		width: 100%;
		background-color: #fff;
	}
	.btn{
		width: 44px;
		height: 40px;
		padding: 5px 12px;
		position: relative;
		.message{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.search-wrap{
		flex: 1;
		font-size: 14px;
		color: #999;
		border-radius: 100px;
		background-color: #f2f2f2;
		/* #ifdef H5 */
		margin-right: 24rpx;
		/* #endif */
		.icon-sousuo{
			margin-right: 6px;
			font-size: 18px;
			color: #999;
		}
	}
</style>
